<template>
  <div class="newHome-box">
    <div class="user-info">
      <van-nav-bar title="还款" left-arrow @click-left="$router.back()"/>
      <div class="user-info-num">
        <p class="user-info-title">本月应还（元）</p>
        <div class="user-info-price">{{ abTools.comdify(quota.currAmt.toFixed(2)) }}</div>
        <div class="user-info-ul">
          <div class="user-info-li">
            <div class="li-price">{{ abTools.comdify(quota.capitalAmt.toFixed(2)) }}</div>
            <p class="li-title">本月应还本金（元）</p>
            <div class="border-right"></div>
          </div>
          <div class="user-info-li">
            <div class="li-price">{{ abTools.comdify(quota.interestAmt.toFixed(2)) }}</div>
            <p class="li-title">本月应还利息（元）</p>
          </div>
        </div>
        <div class="bottom_btn" @click="nowRepaymentClick()">立即还款</div>
      </div>
    </div>
    <div class="home-list-box">
      <div class="product_main">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
            <div class="product_bg">
              <gz-default-page v-if="!dataList || dataList.length <= 0" :imageSize="'14.8rem'" :textSize="'1.4rem'" :text="'暂无记录'"></gz-default-page>
              <div v-for="item,index in dataList" :key="index" class="product_item" style="justify-content: space-between;" @click="toDetail(item)">
                <div class="title-box">
                  <div class="title-left" style="flex: 1;">
                    <div class="loan-title">{{ item.prodNam }} </div>
                  </div>
                  <div class="pro-arrow">
                    <span>共{{item.receiptCounts}}笔借款</span>
                    <van-icon name="arrow" />
                  </div>
                </div>
                <div class="product_item_left">
                  <div class="product_item_item">
                    <p class="pro-title">可用额度</p>
                    <div class="pro-price">{{ abTools.comdify(Number(Number(item.contractAmt) - Number(item.usageAmt)).toFixed(2)) }}<span> 元</span></div>
                  </div>
                  <div class="product_item_item">
                    <p class="pro-title">已用额度</p>
                    <div class="pro-price">{{ abTools.comdify(Number(item.usageAmt).toFixed(2)) }}<span> 元</span></div>
                  </div>
                </div>
              </div>
            </div>
          <!-- </van-list>
        </van-pull-refresh>     -->
      </div>
    </div>
    <div class="divider-footer-line">
      <van-divider :style="{ color: 'rgb(201, 205, 212)', borderColor: 'rgb(221, 221, 221)', padding: '0 20%', margin: '0', fontSize: '1.4rem' }">农商银行</van-divider>
      <group-title style="text-align: center;margin: 0;color: rgb(201, 205, 212);font-size: 1rem;">心天地  行天下</group-title>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
import {gzDefaultPage} from '@/components/customize'
export default {
  components: { gzDefaultPage },
  name: "repaymentHome",
  data() {
    return {
      systemColor: '',
      dataList:[
      ],
      searchParam:{
      },
      quota: {
        currAmt: 0,
        capitalAmt: 0,
        interestAmt: 0,
      }
    };
  },
  created: function() {
    this.systemColor = localStorage.getItem("systemColor");
    this.getContractList();
    this.getContractInfo();
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    if (window.localStorage) {
      var userMsgJson = localStorage.getItem("userMsg");
      if (userMsgJson) {
        try {
          this.userMsg = JSON.parse(userMsgJson);
        } catch (error) {}
      }
    }
  },
  methods: {
    toDetail(item){
      var query = {
        contractId: item.contractId,
        id: item.id
      }
      this.$router.push({path:'/loanPage/usageDetails',query: query});
    },
    getContractList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/paymentList', this.searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.dataList = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    getContractInfo() {
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/custQuotaInfo', this.searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.quota = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    nowRepaymentClick(){
      this.$router.push({path:'/loanPage/nowRepayment'});
    }
    // getNewsList(){
    //   let param = {
    //       "offset":(this.page-1)*this.pageSize,
    //       "limit":this.pageSize,
    //   };
    //   // if (this.refreshing) {
    //   //     this.dataList = [];
    //   //     this.refreshing = false;
    //   // }
    //   this.baseService.postForm(this.__ctx + "/oa/oANotify/queryCustomerNotify",param).then(result => {
    //       this.dataList = this.dataList.concat(result.rows);
    //       this.pageData.total=result.total;
    //       this.loading = false;
    //       if (result.rows.length == 0) {
    //           this.finished = true;
    //       }else{
    //           this.finished = false;
    //       }
    //   }, function (status) {
    //       this.loading = false;
    //       this.finished = true;
    //       if (status == !0) {
    //           this.$toast({
              //   icon: 'warning',
              //   message: '加载失败！' + status
              // });
    //       }
    //   });
    // },
    // onRefresh() {
    //     // 清空列表数据
    //     this.finished = false;

    //     // 重新加载数据
    //     // 将 loading 设置为 true，表示处于加载状态
    //     this.loading = true;
    //     this.getNewsList();
    // },
    // onLoad() {
    //     if(this.refreshing){
    //         this.dataList = [];
    //         this.page = 1;
    //         this.refreshing = false;
    //     }else{
    //         this.page = this.page + 1;
    //     }
    //     this.getNewsList();
    // },
  },
};
</script>

<style scoped lang="less">
.newHome-box {
  /deep/.van-nav-bar{
    background-color: transparent;
    .van-nav-bar__content{
      height: 4.4rem;
      line-height: 2rem;
      .van-icon{
        color: rgb(255, 255, 255);
        font-size: 2rem;
      }
      .van-nav-bar__title{
        font-size: 1.8rem;
        color: rgb(255, 255, 255);
      }
    }
  }
  [class*=van-hairline]::after{
    border: 0;
  }
  .user-info {
    position: relative;
    background-image:url("../../assets/blueSeries/home-bg.png");
    background-size: 100%;
    background-position: bottom;
    width: 100%;
    height: 21.4rem;
    margin-bottom: 9rem;
    .user-info-num{
      background: #ffffff;
      color: rgb(29, 33, 41);
      border-radius: 1rem;
      font-size: 1.6rem;
      // margin: 1.3rem;
      position: absolute;
      right:1.2rem;
      left: 1.2rem;
      bottom: -7.8rem;
      text-align: center;
      min-height: 16.7rem;

      .user-info-title{
        font-weight: 500;
        margin-top: 2rem;
        line-height: 1.8rem;
      }
      .user-info-price{
        font-weight: 700;
        font-size: 2.8rem;
        line-height: 3.3rem;
        min-height: 3.3rem;
        color: rgb(29, 33, 41);
        margin-top: 0.8rem;
      }
      .bottom_btn{
        height: 4.4rem;
        margin: 1.6rem 1.6rem 2rem;
        background: linear-gradient(270.00deg, var(--primary-color), var(--gradient2-color));
        border-radius: 4rem;
        color: rgb(255, 255, 255);
        font-family: HarmonyOS Sans SC;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 4.4rem;
        letter-spacing: 0%;
        text-align: center;
      }
    }
    .user-info-ul{
      // background: var(--price-bg-color);
      display: flex;
      align-items: center;
      margin: 1.4rem 1.6rem 1.5rem;
      border-radius: 0.5rem;
      .user-info-li{
        width: 50%;
        margin: 0.6rem 0;
        position: relative;
        .li-title{
          font-size: 1.2rem;
          color: rgba(29, 33, 41, 0.54);
          margin-top: 0.6rem;
        }
        .li-price{
          font-size: 1.6rem;
          font-weight: 500;
          min-height: 1.8rem;
        }
      }
      .border-right {
        width: 0.6px;
        height: 3.7rem;
        margin: 0;
        background: #f2f2f2;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -1.9rem;
      }
    }
  }
  .product_main {
    margin-bottom: 7.3rem;
    background: #F4F6F8;
    .product_bg{

      .product_item {
        margin: 1.2rem;
        background: rgb(255, 255, 255);
        color: rgb(134, 144, 156);
        font-size: 1.3rem;
        border-radius: 1rem;
        padding: 1.2rem 1.6rem;

        .title-box {
          padding-bottom: 0.8rem;
          position: relative;
          display: flex;
          justify-content:space-between;
          align-items: center;
          .pro-arrow{
            display:flex;
            align-items: center;
            font-size: 1.8rem;
            margin-right: 0.6rem;
            span{
              // border: 1px solid var(--primary60-color);
              border-radius: 0.4rem;
              color: rgba(29, 33, 41, 0.54);
              font-size: 1.3rem;
              line-height: 1.5rem;
              padding: 0.2rem 0.3rem;
              font-weight: 400;
              margin-right: 0.5rem;
            }
            /deep/.van-icon:before{
              width:0.84rem;
              color: rgb(201, 205, 212);
            }
          }
        }
        .loan-title{
          font-size: 1.6rem;
          line-height: 1.9rem;
          color: rgb(29, 33, 41);
          font-weight: 700;
          span{
            border: 1px solid var(--primary60-color);
            border-radius: 0.4rem;
            color: var(--primary-color);
            font-size: 1.3rem;
            line-height: 1.5rem;
            padding: 0.2rem 0.3rem;
            font-weight: 400;
            margin-left: 1rem;
          }
        }

        .product_item_left {
          width: 100%;
          .product_item_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-width: 50%;
            text-align: center;
            position: relative;
            padding-right: 0.4rem;
            margin-top: 1.2rem;
            .pro-price{
              font-size: 1.6rem;
              line-height: 1.9rem;
              color: rgb(29, 33, 41);
              span{
                font-size: 1.4rem;
                line-height: 1.6rem;
                color: rgb(134, 144, 156);
              }
            }
            .pro-title{
              font-size: 1.4rem;
              line-height: 1.6rem;
              color: rgb(134, 144, 156);
            }
          }
        }
      }
    }
    .arrow-more{
      font-size: 1.2rem;
      line-height: 2rem;
      color: rgb(29, 33, 41);
      text-align: center;
      height: 4rem;
    }
  }
}
// 橙色系
.orangeSeries .user-info {
  background-image: url('../../assets/orangeSeries/repaymentHome-bg.png');
}
// 蓝色系
.blueSeries .user-info {
  background-image: url('../../assets/blueSeries/repaymentHome-bg.png');
}
.divider-footer-line{
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: -1;
}
</style>
